<!-- 公共文件 start -->
@extends('admin.public.base')
<!-- 公共文件 end -->
@section('content')
    <div class="x-nav">
            <span class="layui-breadcrumb mbx_fl_10">
                <a href="/admin">首页</a>
                <a href="">演示</a>
                <a><cite>导航元素</cite></a>
            </span>
        <a class="layui-btn layui-btn-small mbx_fr_10" style="line-height:1.6em;margin-top:5px" onclick="location.reload()" title="刷新">
            <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
        </a>
    </div>
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body ">
                        <form class="layui-form" onsubmit="return false">
                            <div class="layui-input-inline layui-show-xs-block">
                                <input class="layui-input" placeholder="上级ID" name="pid" value="0">
                                <input class="layui-input" placeholder="分类名" name="cate_name">
                                <input class="layui-input" placeholder="分类地址" name="url">
                                <input class="layui-input" placeholder="分类图标" name="icon_font">
                                <input class="layui-input" placeholder="排序" name="sort">
                                <input class="layui-input" placeholder="类型" name="type">
                            </div>
                            <div class="layui-input-inline layui-show-xs-block">
                                <button class="layui-btn" lay-filter="add" lay-submit="">添加</button>
                            </div>
                        </form>
                        <hr>
                    </div>
                    <div class="layui-card-body ">
                        <table class="layui-table">
                            <thead>
                            <tr>
                                <th width="70">ID</th>
                                <th>栏目名</th>
                                <th>地址</th>
                                <th>上级栏目ID</th>
                                <th>图标</th>
                                <th width="50">排序</th>
                                <th width="50">类型</th>
                                <th width="80">状态</th>
                            </thead>
                            <tbody class="x-cate">

                            @foreach( $data as $item)
                                <tr cate-id='{{$item['id']}}' fid='{{$item['pid']}}' >
                                    <td>{{$item['id']}}</td>
                                    <td><i class="layui-icon x-show" status='true'>&#xe623;</i><b ondblclick="ShowElement(this,{{$item['id']}},'name')">{{$item['name']}}</b></td>
                                    <td ondblclick="ShowElement(this,{{$item['id']}},'url')">{{$item['url']}}</td>
                                    <td ondblclick="ShowElement(this,{{$item['pid']}},'pid')">{{$item['pid']}}</td>
                                    <td ondblclick="ShowElement(this,{{$item['id']}},'icon_font')">{{$item['icon_font']}}</td>
                                    <td ondblclick="ShowElement(this,{{$item['id']}},'sort')">{{$item['sort']}}</td>
                                    <td ondblclick="ShowElement(this,{{$item['id']}},'type')">{{$item['type']}}</td>
                                    <td ondblclick="ShowElement(this,{{$item['id']}},'status')">{{$item['status']}}</td>
                                </tr>
                                @if($item['son'] && is_array($item['son']))
                                    @foreach( $item['son'] as $vv)
                                        <tr cate-id='{{$vv['id']}}' fid='{{$vv['pid']}}' >
                                            <td>{{$vv['id']}}</td>
                                            <td>&nbsp;&nbsp;└─<b ondblclick="ShowElement(this,{{$vv['id']}},'name')">{{$vv['name']}}</b></td>
                                            <td ondblclick="ShowElement(this,{{$vv['id']}},'url')">{{$vv['url']}}</td>
                                            <td ondblclick="ShowElement(this,{{$vv['pid']}},'pid')">{{$vv['pid']}}</td>
                                            <td ondblclick="ShowElement(this,{{$vv['id']}},'icon_font')">{{$vv['icon_font']}}</td>
                                            <td ondblclick="ShowElement(this,{{$vv['id']}},'sort')">{{$vv['sort']}}</td>
                                            <td ondblclick="ShowElement(this,{{$vv['id']}},'type')">{{$vv['type']}}</td>
                                            <td ondblclick="ShowElement(this,{{$vv['id']}},'status')">{{$vv['status']}}</td>
                                        </tr>
                                    @endforeach
                                @endif
                            @endforeach

                            </tbody>
                        </table>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <script>
        layui.use(['form', 'layer','jquery'], function() {
            $ = layui.jquery;
            var form = layui.form,
                layer = layui.layer;

            //监听提交
            form.on('submit(add)', function(data) {
                console.log(data);
                $.ajax({
                    type: 'POST',
                    url: '/admin/system/navAdd',
                    data:data.field,
                    dataType: 'json',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                    },
                    success: function (data) {
                        alert(data.msg);
                        return false;
                    },
                    error: function (xhr, type) {
                        alert('Ajax error!');
                        return false;
                    }
                });
            });
        });
        function ShowElement(element,id,ppa)
        {
            var oldhtml = element.innerHTML;
            var newobj = document.createElement('input');
            //创建新的input元素
            newobj.type = 'text';
            newobj.value = oldhtml;
            //为新增元素添加类型
            newobj.onblur = function(){
                element.innerHTML = this.value ? this.value : oldhtml;
                var ppv = element.innerHTML;
                //当触发时判断新增元素值是否为空，为空则不修改，并返回原有值
                $.ajax({
                    type: 'POST',
                    url: '/admin/system/navEdit',
                    data:{id:id,ppa:ppa,ppv:ppv},
                    dataType: 'json',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                    },
                    success: function (data) {

                    },
                    error: function (xhr, type) {
                        alert('Ajax error!')
                    }
                });
            }
            element.innerHTML = '';
            element.appendChild(newobj);
            newobj.focus();
        }



        /*用户-删除*/
        function member_del(obj,id){
            layer.confirm('确认要删除吗？',function(index){
                //发异步删除数据
                $(obj).parents("tr").remove();
                layer.msg('已删除!',{icon:1,time:1000});
            });
        }

        // 分类展开收起的分类的逻辑
        //
        $(function(){
            $("tbody.x-cate tr[fid!='0']").hide();
            // 栏目多级显示效果
            $('.x-show').click(function () {
                if($(this).attr('status')=='true'){
                    $(this).html('&#xe625;');
                    $(this).attr('status','false');
                    cateId = $(this).parents('tr').attr('cate-id');
                    $("tbody tr[fid="+cateId+"]").show();
                }else{
                    cateIds = [];
                    $(this).html('&#xe623;');
                    $(this).attr('status','true');
                    cateId = $(this).parents('tr').attr('cate-id');
                    getCateId(cateId);
                    for (var i in cateIds) {
                        $("tbody tr[cate-id="+cateIds[i]+"]").hide().find('.x-show').html('&#xe623;').attr('status','true');
                    }
                }
            })
        })

        var cateIds = [];
        function getCateId(cateId) {
            $("tbody tr[fid="+cateId+"]").each(function(index, el) {
                id = $(el).attr('cate-id');
                cateIds.push(id);
                getCateId(id);
            });
        }

    </script>
@endsection
